<template>
  <div>
    <el-row>
      <el-select style="float:left" v-model="mFilter_p0" placeholder="请选择部门">
        <el-option v-for="item in mLstP0" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-select style="float:left;margin-left:10px" v-model="mFilter_p1" placeholder="请选择科室">
        <el-option v-for="item in mLstP1" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-date-picker
        style="float:left;margin-left:10px"
        v-model="mDateRange"
        type="daterange"
        align="right"
        value-format="yyyy-MM-dd"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      ></el-date-picker>

      <el-select
        style="float:left;margin-left:10px"
        v-model="mFilter_orderStatus"
        placeholder="请选择状态"
      >
        <el-option
          v-for="item in mLstOrderStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-button
        style="float:left;margin-left:10px"
        type="primary"
        @click="showExportDialog()"
      >导出Excel表格</el-button>
    </el-row>
    <el-row style="margin-top:20px">
      <el-table :data="mTableData" border stripe style="width: 100%">
        <el-table-column label="序号" prop="index"></el-table-column>
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="申请部门" prop="applyUpPartmentName"></el-table-column>
        <el-table-column label="申请科室" prop="applyPartmentName"></el-table-column>
        <el-table-column label="申请人" prop="applyUserName"></el-table-column>
        <!-- <el-table-column label="联系电话" prop="tel" width="120"></el-table-column> -->
        <el-table-column label="乘车人" prop="strPassenger1"></el-table-column>
        <el-table-column label="乘车地点" prop="setoffAddress" width="140"></el-table-column>
        <el-table-column label="到达地点" prop="arrivalAddress" width="140"></el-table-column>
        <el-table-column label="发车时间" prop="setoffTime" width="140"></el-table-column>
        <el-table-column label="返回时间" prop="backTime" width="140"></el-table-column>
        <!-- <el-table-column label="司机" v-if="mTabActive=='second'" prop="strDriver1"></el-table-column> -->
        <!-- <el-table-column label="车辆" v-if="mTabActive=='third'" prop="strCar1"></el-table-column> -->
        <!-- <el-table-column label="三方公司" v-if="mTabActive=='fourth'" prop="thirdCompanyName"></el-table-column> -->
        <el-table-column label="用车数量" prop="requstCarNum"></el-table-column>
        <!-- <el-table-column label="乘坐人数" prop="passengersNum"></el-table-column> -->
        <!-- <el-table-column label="用车要求" prop="note"></el-table-column> -->
        <!-- <el-table-column label="创建时间" prop="createTime" width="100"></el-table-column> -->
        <el-table-column label="状态" prop="strstatus"></el-table-column>
        <el-table-column label="里程" prop="totalKM"></el-table-column>
      </el-table>
      <el-row style="margin-top:10px;padding-bottom:10px">
        <el-pagination
          style="float:right"
          v-if="totalPage"
          background
          layout="prev, pager, next,jumper"
          @current-change="pageIndexChange()"
          :current-page.sync="page"
          :page-count="totalPage"
        ></el-pagination>
        <span
          v-if="totalPage"
          style="float:right;font-size:14px;margin-top:5px;color:#606266;margin-right:20px"
        >
          共&nbsp;
          <span style="color:#F56C6C">{{totalPage}}</span>&nbsp;页/&nbsp;
          <span style="color:#F56C6C">{{totalCount}}</span>&nbsp;条数据
        </span>

        <span
          style="float:right; font-weight: bold;margin-right:100px;font-size:14px;margin-top:5px;color:#606266;"
        >里程合计 {{mCalTotalKM}} KM</span>
      </el-row>
    </el-row>

    <el-dialog title="提示" :visible.sync="mExportConfirmDialog" width="30%">
      <span>是否导出Excel</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mExportConfirmDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="mExportConfirmDialog = false;queryControllerOrders(true)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style >
.mainDiv {
  min-width: 100%;
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
.spanPoint {
  cursor: pointer;
}
.borderMain {
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.borderAround {
  padding: 10px;
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.ctrlCard {
}
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi,
} from "../../api/user.js";
import { getCarsApi } from "../../api/car.js";
import { getNowFormatDate, getWeekToday, logxApi } from "../../api/util.js";
import { turnOrderType, turnOrderStatus } from "../../api/orderHelper.js";
import { getPartmentsApi } from "../../api/partment.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi,
  getOrderDetailApi,
  adminComfirmedApi,
} from "../../api/order.js";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      mExportConfirmDialog: false,
      mTableData: [],
      mOrderDetailDialog: undefined,
      mSelectRow: {},
      mDetailLoading: false,
      mTotalKM: undefined,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      mLstOrderStatus: [
        { label: "全部状态", value: "all" },
        { label: "待审核", value: "created" },
        { label: "待调度", value: "allowed" },
        { label: "待出发", value: "dispatched" },
        { label: "已出发", value: "travelStarted" },
        { label: "待确认", value: "travelEnded" },
        { label: "待申请人确认", value: "adminComfirmed" },
        { label: "已完成", value: "finished" },
        { label: "已取消", value: "cancled" },
        { label: "未通过", value: "refused" },
        { label: "已关闭", value: "closed" },
      ],
      mDateRange: undefined,
      mFilter_orderStatus: "finished",
      mLstP0: [],
      mLstP1: [],
      mFilter_p0: undefined,
      mFilter_p1: undefined,
      page: 1,
      pagesize: 10,
      totalPage: 0,
      totalCount: 0,
      mCalTotalKM: 0,
    };
  },
  created() {},
  mounted() {
    // this.getThridCompany();
    // this.queryControllerOrders();
    this.getPartments();
  },
  watch: {
    mFilter_p0(v1, v2) {
      var that = this;
      if (that.mFilter_p0 == "all") {
        // 全部部门的情况
        that.mFilter_p1 = "全部";
        this.queryControllerOrders();
      } else {
        this.getPartments_p1();
      }
    },
    mFilter_p1(v1, v2) {
      this.page = 1;
      this.queryControllerOrders();
    },
    mDateRange(v1, v2) {
      this.page = 1;
      this.queryControllerOrders();
    },
    mFilter_orderStatus(v1, v2) {
      this.page = 1;
      this.queryControllerOrders();
    },
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    showOrderDetailDialog(order) {
      this.mOrderDetailDialog = true;
      this.getOrderDetail(order.id);
    },
    getOrderDetail(orderId) {
      var that = this;
      that.mDetailLoading = true;
      getOrderDetailApi(
        orderId,
        getRequestHeader(),
        new (function () {
          this.fail = function (msg) {
            that.mDetailLoading = true;
          };
          this.success = function (data) {
            var order = data;
            order.strOrderType = turnOrderType(order.orderType);
            order.status = turnOrderStatus(order.status);
            if (order.applyUser && order.applyUser.tel) {
              order.tel = order.applyUser.tel;
            } else {
              order.tel = "-";
            }

            if (order.allowCarpooling == "yes") {
              order.strPinChe = "是";
            } else {
              order.strPinChe = "否";
            }

            if (order.lstCD) {
              order.lstCD.forEach((element) => {
                if (element.status == "using") {
                  element.strStatus = "待出发";
                } else {
                  element.strStatus = turnOrderStatus(element.status);
                }
              });
            }

            if (!order.note) {
              order.note = "-";
            }

            that.mSelectRow = order;
            that.mDetailLoading = false;
          };
        })()
      );
    },
    adminComfirmed(orderId) {
      if (!this.mTotalKM) {
        this.$message.error("请输入里程数");
        return;
      }
      var that = this;
      this.showFullLoading();
      adminComfirmedApi(
        orderId,
        that.mTotalKM,
        getRequestHeader(),
        new (function () {
          this.fail = function (msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function (data) {
            that.clsoeFullLoading();
            that.$message.success("成功");
            that.getOrderDetail(orderId);
            that.$emit("refreshOrderNumberEvent3", "2");
          };
        })()
      );
    },
    getPartments() {
      var that = this;
      getPartmentsApi(
        "0",
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            var array = [];
            var o1 = {};
            o1.label = "全部部门";
            o1.value = "all";
            array.push(o1);
            data.forEach((element) => {
              var obj = {};
              obj.label = element.name;
              obj.value = element.partmentId;
              array.push(obj);
            });

            that.mLstP0 = array;
            if (that.mLstP0.length > 0) {
              that.mFilter_p0 = array[0].value;
            } else {
              that.mFilter_p0 = undefined;
            }
          };
          this.fail = function (msg) {};
        })()
      );
    },
    getPartments_p1() {
      var that = this;
      if (!that.mFilter_p0) {
        return;
      }
      var that = this;
      getPartmentsApi(
        that.mFilter_p0,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            var array = [];
            var o = {};
            o.label = "全部科室";
            o.value = "all";
            array.push(o);
            data.forEach((element) => {
              var obj = {};
              obj.label = element.name;
              obj.value = element.partmentId;
              array.push(obj);
            });
            that.mLstP1 = array;
            if (that.mLstP1.length > 0) {
              that.mFilter_p1 = array[0].value;
              that.queryControllerOrders();
            } else {
              that.mFilter_p1 = undefined;
            }
          };
          this.fail = function (msg) {};
        })()
      );
    },
    calDate() {
      var d = {};
      d.start = undefined;
      d.end = getNowFormatDate() + " 23:59:59";
      if (this.mDateRange) {
        var arrs = ("" + this.mDateRange).split(",");
        if (arrs && arrs.length == 2) {
          d.start = arrs[0];
          d.end = arrs[1] + " 23:59:59";
        }
      }
      return d;
    },
    queryControllerOrders(isExportFile) {
      var that = this;
      if (!that.mFilter_p0 || !that.mFilter_p1) {
        return;
      }
      var filter = {};
      filter.p0Id = that.mFilter_p0;
      filter.p1Id = that.mFilter_p1;
      if (isExportFile) {
        filter.exportFile = true;
      }

      that.showFullLoading();
      var dateR = this.calDate();
      queryControllerOrdersApi(
        this.page,
        this.pagesize,
        [this.mFilter_orderStatus],
        dateR.start,
        dateR.end,
        filter,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            that.clsoeFullLoading();
            that.mTableLoading = false;
            that.page = data.currentPage;
            that.totalCount = data.totalCount;
            that.totalPage = data.totalPage;
            that.mCalTotalKM = data.calTotalKM;

            //

            var index = 0;
            data.list.forEach((element) => {
              // 计算出Index

              element.index = (that.page - 1) * that.pagesize + index + 1;
              index++;
              element.strDriver1 = "-";
              if (element.lstDrivers && element.lstDrivers.length > 0) {
                element.strDriver1 = element.lstDrivers[0].name;
              }
              element.strCar1 = "-";
              if (element.lstCars && element.lstCars.length > 0) {
                element.strCar1 = element.lstCars[0].name;
              }
              if (element.passengers && typeof element.passengers == "string") {
                element.passengers = JSON.parse(element.passengers);
              }
              if (element.passengers && element.passengers.length > 0) {
                element.strPassenger1 = element.passengers[0].name;
              } else {
                element.strPassenger1 = "-";
              }

              // console.log("========" + element.status);
              if (
                element.status == "dispatched" ||
                element.status == "allowed"
              ) {
                element.showClose = true;
              } else {
                element.showClose = false;
              }

              if (element.totalKM) {
                element.totalKM += "KM";
              } else {
                element.totalKM = "-";
              }

              element.strstatus = turnOrderStatus(element.status);
            });

            that.mTableData = data.list;

            if (isExportFile) {
              var downloadUrl =
                getRequestHeader().fileServer + "/" + data.excelFile;
              window.location.href = downloadUrl;
            }
          };
          this.fail = function (msg) {
            that.clsoeFullLoading();
            that.mTableData = [];
          };
        })()
      );
    },
    pageIndexChange() {
      // this.page = this.mUiPageIndex - 1;
      this.queryControllerOrders();
    },
    showExportDialog() {
      this.mExportConfirmDialog = true;
    },

    //----------over methods------
  },
};
</script>